<template>
  <view class="page-container">
    <!-- 使用 v-for 指令来循环渲染内容 -->
    <view class="content" v-for="(item, index) in dataList" :key="index">
      <text>作者: {{ item.author }}</text>
      <view>
        <text>标题: {{ item.topic }}</text>
      </view>
      <view class="content-text" @tap="contentTap(item)">
        <text>发布内容: {{ item.content }}</text>
      </view>
      <view>
        <text>点赞: {{ item.up }}</text>
        <text>差评: {{ item.down }}</text>
      </view>
      <view>
        <text>发布时间: {{ item.time }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      // userId: '' ,// 添加用户ID字段
	  userInfo: {}
    };
  },
  onLoad() {
    const app = getApp();
    if (app.globalData.userInfo) {
      this.userId = app.globalData.userInfo.id;
      this.userInfo = app.globalData.userInfo;
    } else {
      uni.showToast({
        title: '用户未登录或信息未加载',
        icon: 'none'
      });
      uni.relaunch({
        url: '/pages/login/login' // 重定向到登录页面
      });
    }
    this.fetchData();
  },
  methods: {  
    fetchData() {
      const that = this;
      uni.request({
        url: `http://127.0.0.1:8081/topic_user/?authorid=${encodeURIComponent(this.userId)}`,
        method: 'GET',
        success(res) {
          uni.hideLoading();
          if (res.statusCode === 200) {
            console.log("用户发布信息", res);
            // 直接处理返回的数组
            that.dataList = res.data.map(item => ({
              id: item.id,
              topic: item.topic,
              content: item.content,
              author: item.author,
              up: item.up,
              down: item.down,
              time: item.time,
              show: item.show
            }));
          } else {
            console.error('Failed to fetch data:', res);
            uni.showToast({
              title: '数据加载失败，请检查网络或稍后重试',
              icon: 'none'
            });
          }
        },
        fail(error) {
          uni.hideLoading();
          console.error('Request failed:', error);
          uni.showToast({
            title: '网络请求失败，请检查链接或稍后重试',
            icon: 'none'
          });
        }
      });
    },
    contentTap(item) {
      // 将对象转换为JSON字符串，然后进行编码
      const params = encodeURIComponent(JSON.stringify(item));
      uni.navigateTo({
        url: '/pages/strategy/contentDetail?params=' + params
      });
    }
  }
};
</script>

<style>
.page-container {
  background-color: #eee; /* 灰色背景 */
  min-height: 100vh; /* 最小高度为视口高度，确保背景覆盖整个屏幕 */
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: flex-start; /* 子元素在主轴起点对齐 */
  align-items: center; /* 子元素在交叉轴中心对齐 */
}

.content {
  background-color: #fff; /* 内容区域背景设置为白色 */
  padding: 20rpx;
  margin: 4rpx 0; /* 设置上下外边距 */
  width: 90%; /* 内容区域宽度，根据设计调整 */
  border: 1px solid #ccc; /* 边框，仅用于展示 */
  border-radius: 4px;
}
.content-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制两行文本 */
  overflow: hidden;
  opacity: 1; /* 重置透明度 */
  line-height: 1.2; /* 设置行高 */
  margin-top: 5px; /* 设置上边距 */
  position: relative; /* 为伪元素定位 */
}

.content-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2em; /* 根据行高调整 */
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none; /* 防止伪元素影响点击 */
}
</style>